<script lang="ts" defer async setup>
import { onMounted, reactive } from 'vue'
import { changePwd } from '@/api/login'
import { useI18n } from 'vue-i18n'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

const { t } = useI18n()

const baseData = reactive({
  showCountDown: false,
  showPassWord: false,
  showOldPassWord: false,
  showcPassWord: false,
  secounds: 60,
  current: 0,
  registerForm: {
    email: '',
    password: null,
    oldpassword: null,
    code: null,
    confirmPassword: null,
    source: null,
  },
})

const rightClick = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

const bind = async () => {
  if (baseData.registerForm.password != baseData.registerForm.confirmPassword) {
    uni.showToast({
      title: t('Passwords Do Not Match'),
      icon: 'none',
    })
    return
  }
  
  if (!baseData.registerForm.password) {
    uni.showToast({
      title: t('Password Cannot Be Empty'),
      icon: 'none',
    })
    return
  }
  
  if (!baseData.registerForm.oldpassword) {
    uni.showToast({
      title: t('Please enter your old password'),
      icon: 'none',
    })
    return
  }
  
  let params: any = {
    password: baseData.registerForm.oldpassword,
    newPassword: baseData.registerForm.password,
  }
  
  try {
    const res = await changePwd(params)
    if (res.code === 0) {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      setTimeout(() => {
        rightClick()
      }, 1000)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('Failed to change password:', error)
    uni.showToast({
      title: t('Failed to change password'),
      icon: 'none',
    })
  }
}

// 
const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

useSwipeHandlers(handleSwipeRight)

onMounted(() => {
  // 
  uni.setNavigationBarTitle({
    title: 'Ttask!' + t('Earn money so easy') + '!', // 
  })
})
</script>

<template>
  <view class="change-password-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1">🔒</view>
      <view class="floating-shape shape-2">🔑</view>
      <view class="floating-shape shape-3">🛡️</view>
    </view>

    <!--  -->
    <up-navbar title="" @leftClick="rightClick" :autoBack="false">
      <template #left>
        <view class="nav-back-btn">
          <image class="back-icon" src="../../../static/img/left.png"></image>
        </view>
      </template>
    </up-navbar>

    <!--  -->
    <view class="header-section">
      <view class="title-container">
        <text class="main-title">{{ t('Change Password') }}</text>
        <text class="sub-title">{{ t('For your account security, please set a new password') }}</text>
      </view>
    </view>

    <!--  -->
    <view class="form-section">
      <view class="form-container">
        <!--  -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-icon">🔒</text>
            <text class="label-text">{{ t('Current Password') }}</text>
          </view>
          <view class="input-wrapper">
            <view class="password-input-container">
              <up-input
                v-model="baseData.registerForm.oldpassword"
                :type="baseData.showOldPassWord ? 'text' : 'password'"
                :placeholder="t('Old Password')"
                border="none"
                bgColor="rgba(255, 255, 255, 0.8)"
                :customStyle="{
                  borderRadius: '15rpx',
                  padding: '25rpx 30rpx',
                  fontSize: '28rpx'
                }"
              />
              <view class="password-toggle" @click="baseData.showOldPassWord = !baseData.showOldPassWord">
                <text class="toggle-icon">{{ baseData.showOldPassWord ? '👁️' : '🙈' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!--  -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-icon">🔑</text>
            <text class="label-text">{{ t('Login Password') }}</text>
          </view>
          <view class="input-wrapper">
            <view class="password-input-container">
              <up-input
                v-model="baseData.registerForm.password"
                :type="baseData.showPassWord ? 'text' : 'password'"
                :placeholder="t('Login Password')"
                border="none"
                bgColor="rgba(255, 255, 255, 0.8)"
                :customStyle="{
                  borderRadius: '15rpx',
                  padding: '25rpx 30rpx',
                  fontSize: '28rpx'
                }"
              />
              <view class="password-toggle" @click="baseData.showPassWord = !baseData.showPassWord">
                <text class="toggle-icon">{{ baseData.showPassWord ? '👁️' : '🙈' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!--  -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-icon">🛡️</text>
            <text class="label-text">{{ t('Confirm Login Password') }}</text>
          </view>
          <view class="input-wrapper">
            <view class="password-input-container">
              <up-input
                v-model="baseData.registerForm.confirmPassword"
                :type="baseData.showcPassWord ? 'text' : 'password'"
                :placeholder="t('Confirm Login Password')"
                border="none"
                bgColor="rgba(255, 255, 255, 0.8)"
                :customStyle="{
                  borderRadius: '15rpx',
                  padding: '25rpx 30rpx',
                  fontSize: '28rpx'
                }"
              />
              <view class="password-toggle" @click="baseData.showcPassWord = !baseData.showcPassWord">
                <text class="toggle-icon">{{ baseData.showcPassWord ? '👁️' : '🙈' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!--  -->
        <view class="submit-section">
          <view class="submit-button" @click="bind">
            <text class="button-text">{{ t('Change Password') }}</text>
          </view>
        </view>

        <!--  -->
        <view class="password-tips">
          <view class="tips-title">
            <text class="tips-icon">💡</text>
            <text class="tips-text">{{ t('Password Security Tips') }}</text>
          </view>
          <view class="tips-list">
            <text class="tip-item">• {{ t('Password must be at least 8 characters') }}</text>
            <text class="tip-item">• {{ t('Include letters and numbers') }}</text>
            <text class="tip-item">• {{ t('Avoid using simple passwords') }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.change-password-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;

  // 
  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;

      &.circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 150rpx;
        height: 150rpx;
        top: 30%;
        right: 20%;
        animation-delay: 2s;
      }

      &.circle-3 {
        width: 100rpx;
        height: 100rpx;
        top: 75%;
        left: 20%;
        animation-delay: 4s;
      }
    }

    .floating-shape {
      position: absolute;
      font-size: 60rpx;
      opacity: 0.3;
      animation: bounce 8s ease-in-out infinite;

      &.shape-1 {
        top: 25%;
        right: 15%;
        animation-delay: 1s;
      }

      &.shape-2 {
        top: 60%;
        left: 15%;
        animation-delay: 3s;
      }

      &.shape-3 {
        top: 80%;
        right: 25%;
        animation-delay: 5s;
      }
    }
  }



  // 
  .header-section {
    margin-top: 150rpx;
    margin-bottom: 80rpx;
    padding: 0 40rpx;
    position: relative;
    z-index: 2;

    .title-container {
      text-align: center;

      .main-title {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: white;
        margin-bottom: 20rpx;
        text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
      }

      .sub-title {
        display: block;
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.5;
      }
    }
  }

  // 
  .form-section {
    flex: 1;
    margin: 0 30rpx;
    position: relative;
    z-index: 2;

    .form-container {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 30rpx;
      padding: 60rpx 40rpx;
      box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);

      .input-group {
        margin-bottom: 40rpx;

        .input-label {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .label-icon {
            font-size: 32rpx;
            margin-right: 15rpx;
          }

          .label-text {
            font-size: 28rpx;
            color: #333;
            font-weight: 600;
          }
        }

        .input-wrapper {
          position: relative;

          .password-input-container {
            position: relative;
            display: flex;
            align-items: center;

            ::v-deep .u-input {
              flex: 1;
              box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
              transition: all 0.3s ease;

              &:focus-within {
                transform: translateY(-2rpx);
                box-shadow: 0 12rpx 25rpx rgba(102, 126, 234, 0.2);
              }
            }

            .password-toggle {
              position: absolute;
              right: 20rpx;
              top: 50%;
              transform: translateY(-50%);
              width: 60rpx;
              height: 60rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              z-index: 10;
              background: rgba(255, 255, 255, 0.9);
              border-radius: 50%;
              transition: all 0.3s ease;

              &:hover {
                background: rgba(102, 126, 234, 0.1);
                transform: translateY(-50%) scale(1.1);
              }

              &:active {
                transform: translateY(-50%) scale(0.95);
              }

              .toggle-icon {
                font-size: 28rpx;
                color: #666;
                transition: color 0.3s ease;
              }
            }
          }
        }
      }

      .submit-section {
        margin: 60rpx 0 40rpx;

        .submit-button {
          width: 100%;
          height: 100rpx;
          background: linear-gradient(135deg, #667eea, #764ba2);
          border-radius: 25rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 15rpx 30rpx rgba(102, 126, 234, 0.4);
          transition: all 0.3s ease;

          &:active {
            transform: translateY(2rpx);
            box-shadow: 0 10rpx 20rpx rgba(102, 126, 234, 0.3);
          }

          .button-text {
            font-size: 32rpx;
            color: white;
            font-weight: bold;
          }
        }
      }

      .password-tips {
        .tips-title {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .tips-icon {
            font-size: 28rpx;
            margin-right: 10rpx;
          }

          .tips-text {
            font-size: 26rpx;
            color: #666;
            font-weight: 600;
          }
        }

        .tips-list {
          .tip-item {
            display: block;
            font-size: 24rpx;
            color: #999;
            line-height: 1.6;
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }
}

// 
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}
</style>